<template>
	<view class="editUser-page">
		<ul v-if="user">
			<li class="avatar-wrap" @click="uploadAvatar">
				<div class="left">
					<span>头像</span>
				</div>
				<div class="avatar">
					<image :src="user.header" mode=""></image>
				</div>

			</li>
			<li>
				<div class="left">
					<span>姓名</span>
					<input type="text" v-model="user.nickname">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>

			</li>
			<picker class="picker" :range="sexArray" @change="onChange">
				<li>
					<div class="left">
						<span>性别</span>
						<p>{{handleSex}}</p>
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<li>
					<div class="left">
						<span>参加工作时间</span>
						<input type="text" v-model="handleStartWork" disabled
							:placeholder="handleStartWork ? '' : '请选择参加工作时间'">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<!-- <picker class="picker" range-key="name" type="multiSelector" :range="jobArray" @change="onChangeJob"> -->
			<li @click="jobShow = true">
				<div class="left">
					<span>期望职位</span>
					<input type="text" disabled v-model="handleJob" :placeholder="handleJob ? '' : '请选择期望职位'">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<!-- </picker> -->
			<picker class="picker" range-key="name" :range="moneyList" @change="onChangeMoney">
				<li>
					<div class="left">
						<span>期望薪资</span>
						<input type="text" disabled v-model="handleSalary" :placeholder="handleSalary ? '' : '请选择期望薪资'">
						<!-- <input type="text" v-else disabled v-model="handleSalary"> -->
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker @change="bindPickerChange" mode="region" :range="array">
				<!-- <view class="uni-input">{{array[index]}}</view> -->
				<li>
					<div class="left">
						<span>居住地</span>
						<input placeholder="请选择居住地" disabled type="text" v-model="handleProvince"
							:placeholder="handleProvince ? '' : '请输入居住地'">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>

			<li>
				<div class="left">
					<span>邮箱</span>
					<input placeholder="请输入邮箱" type="text" v-model="user.email">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<li>
				<div class="left">
					<span>个人网站</span>
					<input placeholder="请输入个人网站" type="text" v-model="user.web_url">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<li>
				<div class="left">
					<span>我的优势</span>
					<textarea placeholder="请输入内容" v-model="user.advantage" placeholder-style="color:#CCCCCC" name=""
						id="" cols="30" rows="10"></textarea>
				</div>
			</li>
		</ul>
		<SSButton title="保存" @click="save" />

		<JobPicker :show="jobShow" @close="jobShow = false" @confirm="onChangeJob" />
	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import JobPicker from '@/components/JobPicker.vue'

	import globalConfig from '@/config/index.js'
	import {
		validPhone
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton,
			JobPicker
		},
		data() {
			return {
				user: null,

				sexArray: ['男', '女'], // 性别
				date: '', // 日期
				area: null, // 城市


				job: null, // 职位
				salary: null, // 薪资
				jobArray: [
					[],
					[]
				], // 职位
				moneyList: [], // 薪资

				jobShow: false,

				isJob: false,
				isSalary: false,

			};
		},
		computed: {
			// 性别
			handleSex() {
				let sexs = ['未知', '男', '女']
				return sexs[this.user && this.user.sex]
			},
			// 职位
			handleJob() {
				if (!this.isJob && !this.user && !this.user.current_job_name) return ''
				return this.job ? this.job && this.job.name : this.user && this.user.current_job_name
			},
			// 薪资
			handleSalary() {
				// let userSalary = this.user && this.moneyList.length > 0 && this.moneyList.find(x => x.id == this.user
				// 	.salary)
				// console.log(this.salary ? this.salary && this.salary.name : userSalary && userSalary.name)
				if (!this.isSalary && !this.user && !this.user.salary_name) return ''
				return this.salary ? this.salary.name : this.user && this.user.salary_name
			},
			// 城市
			handleProvince() {
				if (!this.user || !this.user.province) return ''
				if (this.user) {
					return `${this.user.province} ${this.user.city} ${this.user.district}`
				} else {
					return ''
				}
			},

			// 参加工作时间
			handleStartWork() {
				let time = this.user ? this.user.start_work : ''
				if (!time) return ''
				if (!isNaN(Number(time))) {
					let date = new Date(Number(time + '000'))
					return date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date
						.getMonth() + 1) + '-' + ((date.getDate()) < 10 ? `0${date.getDate()}` : date
						.getDate())
				} else {
					return time
				}
			},

			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			const user = uni.getStorageSync('userInfo')
			this.user = user
			this.getJobcate()
			this.getSalary()
		},
		methods: {
			// 上传头像
			uploadAvatar() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: async res => {
						const {
							data
						} = await await this.$http.User.uploadAvatar(res.tempFilePaths[0])
						console.log(data.url)
						this.user.header = globalConfig.BASE_URL + data.url

					}
				});
			},
			// 职位
			async getJobcate() {
				const {
					data
				} = await this.$http.Recruit.jobcate()
				this.isJob = this.user && this.user.current_job_name ? true : false

			},
			// 薪资
			async getSalary() {
				const {
					data
				} = await this.$http.Recruit.getSalary()
				this.moneyList = data
				this.isSalary = this.user.salary_name ? true : false
			},
			// 修改职位
			onChangeJob(e) {
				this.job = e
				this.isJob = true
				this.jobShow = false
			},
			// 性别选择
			onChange(e) {
				this.user.sex = Number(e.detail.value) + 1
			},
			// 薪资
			onChangeMoney(e) {
				this.salary = this.moneyList[e.detail.value]
				this.isSalary = true
			},
			// 日期选择
			bindDateChange(e) {
				let date = e.detail.value.split('-')

				this.user.start_work = `${date[0]}-${date[1]}-${date[2]}`
			},
			// 城市选择
			bindPickerChange(e) {
				this.area = e.detail
				this.user.province = e.detail.value[0]
				this.user.city = e.detail.value[1]
				this.user.district = e.detail.value[2]
				this.user.province_code = e.detail.code[0]
				this.user.city_code = e.detail.code[1]
				this.user.district_code = e.detail.code[2]

			},
			// 提交保存
			async save() {
				
				if (!this.user.nickname.trim()) {
					return uni.showToast({
						icon: 'none',
						title: "请填写姓名"
					})
				}
				if(this.user.sex == 0) {
					return uni.showToast({
						icon: 'none',
						title: "请选择性别"
					})
				}
				if(!this.user.start_work) {
					return uni.showToast({
						icon: 'none',
						title: "请选择参加工作时间"
					})
				}
				if(!this.isJob && this.user.current_job == 0) {
					return uni.showToast({
						icon: 'none',
						title: "请选择期望职位"
					})
				}
				if(!this.isSalary && this.user.salary == 0) {
					return uni.showToast({
						icon: 'none',
						title: "请选择期望薪资"
					})
				}
				if (!this.user.province_code) {
					return uni.showToast({
						icon: 'none',
						title: "请选择居住地"
					})
				}
				const {
					code,
					msg
				} = await this.$http.User.usercv({
					header: this.user.header,
					nickname: this.user.nickname,
					start_work: this.handleStartWork,
					salary: this.isSalary ? this.salary ? this.salary.id : this.user.salary : '',
					advantage: this.user.advantage,
					web_url: this.user.web_url,
					sex: this.user.sex,
					current_job: this.isJob ? this.job ? this.job.id : this.user.current_job : '',
					email: this.user.email,
					province_code: this.user.province_code || this.area && this.area.code[0],
					city_code: this.user.city_code || this.area && this.area.code[1],
					district_code: this.user.district_code || this.area && this.area.code[2],
				})
				uni.showToast({
					title: code == 200 ? '操作成功' : msg,
					icon: 'none'
				})

				if (code === 200) {
					await this.$http.User.getUser()

				}
			},
			// 修改手机号
			submitEditMobile() {

			},
			// 获取验证码
			async getCode() {
				if (!validPhone(this.newMobile)) return uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				const {
					code,
					msg
				} = await this.$http.User.userAuthSms(this.newMobile)

				if (code != 200) return uni.showToast({
					title: msg,
					icon: 'none'
				})

			},



			// 格式化日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="less" scoped>
	.editUser-page {
		padding-bottom: env(safe-area-inset-bottom);

		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;

			.avatar-wrap {
				display: flex;
				align-items: center;

				.avatar {
					width: 64upx;
					height: 64upx;
					border-radius: 64upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 64upx;
					}
				}
			}

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;


				&:last-of-type {
					border-bottom: unset;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
					}

					textarea {
						margin-top: 9upx;
						border: 1px solid #EEEEEE;
						padding: 10upx 11upx;
						min-height: 142upx;
						width: 100%;
						box-sizing: border-box;
					}

					input,
					textarea,
					p {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						margin-top: 20upx;
						min-height: 24upx;
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.popup {
			position: fixed;
			top: 0%;
			left: 0%;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.popup-wrap {
				background: #fff;
				width: 570upx;
				height: 412upx;

			}

			.title {
				display: flex;
				align-items: center;
				padding: 0 32upx;
				height: 96upx;
				border-bottom: 1px solid #EEEEEE;

				span {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 400;
					line-height: 28upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.mobile-wrap {
				padding: 0 32upx;

				.mobile-input-ph {
					color: #999999;
				}

				.mobile-input {
					padding-top: 32upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;

					input {
						color: #333;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
					}

					button {
						height: 56upx;
						line-height: 56upx;
						background: #2AABE2;
						color: #fff;
						font-size: 24upx;
						font-weight: 500;
						padding: 0 10upx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding-top: 32upx;

				button {
					margin: 0;
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					background: #fff;
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
					margin-right: 32upx;
					border-radius: 8upx;

					&:last-of-type {
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}
		}
	}
</style>
